<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    a{
      color: #282c30;
      font-size: 20px;
      font-weight:bolder;
      text-decoration: none;
    }
    .el-menu.el-menu--horizontal{
      border: 0;/*去掉导航器自带的边框*/
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header height="300px" >
     <div style="top: 0; width: 1200px;margin-right: 100px">
       <img  src="gar/logo.png"  style=" width:800px;height: 150px;text-align: center ">
     </div>
      <div style="top: 0; width: 1200px;margin: 0 auto  ;margin-right: 50px ;font-weight:bold ;">
        <el-menu style="margin-left:700px" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <img src="" alt="">
          <el-submenu index="2">
            <template  slot="title">我的订单</template>
            <el-menu-item index="2-1">我的订单</el-menu-item>
            <el-menu-item index="2-2">我的收藏</el-menu-item>
            <el-menu-item index="2-3">我的优惠券</el-menu-item>
            <el-menu-item index="2-4">我的道具</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
          <template slot="title">周边公告</template>
          <el-menu-item index="3-1">仓库盘点发货通知</el-menu-item>
          <el-menu-item index="3-2">CKD系统已回复领取</el-menu-item>
          <el-menu-item index="3-3">全场满99元免运费</el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">帮助中心</template>
            <el-menu-item index="4-1">购物指南</el-menu-item>
            <el-menu-item index="4-2">派送方式</el-menu-item>
            <el-menu-item index="4-3">售后服务</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <div style="height: 60px;background-color: #0aa1ed ;">
        <el-menu style="width: 1200px;margin: 0 auto"
                 mode="horizontal" background-color="#0aa1ed"
                 text-color="#fff" active-text-color="#fff">
          <el-menu-item  style="font-size: 30px" index="1">商城首页</el-menu-item>
          <el-menu-item  style="font-size: 30px" index="2">全部商品</el-menu-item>
          <el-menu-item  style="font-size: 30px" index="3">领取游戏道具</el-menu-item>
          <div style="float: right;  position:relative;top: 10px">
            <el-input type="text" >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-menu>

      </div>
    </el-header>
    <el-container>

    <el-aside style="text-align: center ;color:black;font-weight:bold ;background-color: #0096dc;margin-left: 120px;  " width="500px" >
      <div style="width: 380px;background-color: #475669;margin: 0 auto ">
        <p style="font-size: 60px; ">猜你喜欢 </p>
      </div>
      <!--商品列表开始-->
      <el-row gutter="10">
        <el-col style=" width: 380px; margin-left:60px" span="70" v-for="p in productArr">
          <el-card>
            <img :src="p.url"width="100%" height="233px">
            <p style="font-size: 14px;height: 30px">{{p.title}}</p>
            <p >
              <b>￥{{p.price}}</b>
              <span style="float: right">销量：{{p.saleCount}}</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
      <!--商品列表结束-->



    </el-aside>
    <el-main style="width:1200px;margin:0 50px 0 50px; ">
   <div style="border: 10px inset #666666;height: 70px">
     <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
     <el-menu-item index="1">周边类目</el-menu-item>
     <el-submenu index="2">
       <template slot="title">礼包收藏</template>
       <el-menu-item index="2-1">全部</el-menu-item>
       <el-menu-item index="2-2">典藏包</el-menu-item>
       <el-menu-item index="2-3">雕塑</el-menu-item>
     </el-submenu>
     <el-submenu index="3">
       <template slot="title">手办模型</template>
       <el-menu-item index="3-1">全部</el-menu-item>
       <el-menu-item index="3-2">妙趣手办</el-menu-item>
       <el-menu-item index="3-3">二代手办</el-menu-item>
       <el-menu-item index="3-4">一代手办</el-menu-item>
       <el-menu-item index="3-5">武器模型</el-menu-item>
     </el-submenu>
     <el-submenu index="4">
       <template slot="title">数码电子</template>
       <el-menu-item index="4-1">全部</el-menu-item>
       <el-menu-item index="4-2">手表</el-menu-item>
       <el-menu-item index="4-3">火机</el-menu-item>
       <el-menu-item index="4-4">音响</el-menu-item>
       <el-menu-item index="4-5">数码配件</el-menu-item>
     </el-submenu>
     <el-submenu index="5">
       <template slot="title">新品专区</template>
       <el-menu-item index="5-1">全部</el-menu-item>
       <el-menu-item index="5-2">服饰日用</el-menu-item>
       <el-menu-item index="5-3">雕塑手办</el-menu-item>
       <el-menu-item index="5-4">数码电子</el-menu-item>
       <el-menu-item index="5-5">合金制品</el-menu-item>
     </el-submenu>
     <el-submenu index="6">
       <template slot="title">活动优惠券专区</template>
       <el-menu-item index="6-1">全部</el-menu-item>
       <el-menu-item index="6-2">克伦特送福利</el-menu-item>
       <el-menu-item index="6-3">雪人的清凉夏日</el-menu-item>
       <el-menu-item index="6-4">帝皇的召唤</el-menu-item>
     </el-submenu>
     </el-menu>
   </div>

     <div>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="人气" name="first">人气</el-tab-pane>
          <el-tab-pane label="热销" name="second">热销</el-tab-pane>
          <el-tab-pane label="新品" name="third">新品</el-tab-pane>
          <el-tab-pane label="价格" name="fourth">价格</el-tab-pane>
        </el-tabs>
      </template>
     </div>
    </el-main>
  </el-container>

    <div style="height: 300px;margin: 50px 50px ;border: 20px inset #475669;">
    <h1 style="margin: 0 auto">推荐</h1>
      <hr>
      <img src="gar/bottom.jpg">
    </div>

    <el-footer style="z-index: 1" height="150px">
      <el-container style="text-align: center ;">
    <div style="background-color:white;color: #666 ;margin:  0 40px;width: 200px;">
      <h1>购物指南</h1>
      <a href="">常见问题</a><br>
      <a href="">如何查看订单</a><br>
      <a href="">网购订单流程</a><br>
      <a href="">用户登录及注册</a>
    </div>

      <div style="background-color:white;color: #666 ;margin:  0 40px;width: 200px;">
        <h1>配送方式</h1>
        <a href="">全场满99元免运费</a><br>
        <a href="">配送范围及运费</a>
      </div>

      <div style="background-color:white;color: #666 ;margin:  0 40px;width: 200px;">
        <h1>售后指南</h1>
        <a href="">7天无理由退换货</a><br>
        <a href="">如何办理退换货</a><br>
        <a href="">换货政策说明</a>
      </div>

      <div style="background-color:white;color: #666 ;margin:  0 40px ;width: 200px;">
        <h1>客服说明</h1>
        <p>申诉邮箱：...........</p>
      </div>

        <div style="border: 10px inset #282c30 ;width: 200px;">
          <img src="" alt="">
        </div>
      </el-container>
  </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeIndex: '1',
        activeName: 'second',
        productArr:[{title: "古韵灵犀·旗袍",price:368,url:"imgs/a.jpg",saleCount:"60天已售"+32},
          {title: "女魔法雪人盲盒",price:79,url:"imgs/b.jpg",saleCount:"60天已售"+137},
          {title:"海贼王盲盒女",price:79,url:"imgs/c.jpg",saleCount:"60天已售"+242},
          {title:"海贼王盲盒男",price:79,url:"imgs/d.jpg",saleCount:"60天已售"+355},
          {title:"火影忍者盲盒男",price:79,url:"imgs/d.jpg",saleCount:"60天已售"+212},
          {title:"火影忍者盲盒女",price:79,url:"imgs/d.jpg",saleCount:"60天已售"+315},
          {title:"克伦特的逆转",price:299,url:"imgs/d.jpg",saleCount:"60天已售"+1000},
          {title:"鸡你太美",price:15,url:"imgs/a.jpg",saleCount:"60天已售"+900},
          {title:"DNF官方艺术设定集",price:368,url:"imgs/d.jpg",saleCount:"60天已售"+501},
          {title:"女鬼剑三觉武器模型套装",price:288,url:"imgs/d.jpg",saleCount:"60天已售"+1025},]
      }
    },
   methods:{
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
     },
     handleClick(tab, event) {
       console.log(tab, event);
     }
   }
  })
</script>
</html>